<template>
	<view class="applyRefund">
		<view class="apply-password marin25">
			<view class="ap-title">
				订单编号
			</view>
			<view class="ap-cont">
				<fui-checkbox-group name="checkbox" v-model="psWords" @change="passwordChange">
					<view class="fui-list__item">
						<fui-label>
							<view class="fui-align__center">
								<view class="fui-left">
									<!-- <text class="fui-text">编码：</text> -->
									<text class="fui-text">16386278647863889696</text>
								</view>
								<fui-checkbox class="fui-right" color='#35743D' value="1" checked borderRadius='20%'></fui-checkbox>
							</view>
						</fui-label>

					</view>
				</fui-checkbox-group>
			</view>

		</view>
		<view class="apply-password marin25">
			<view class="ap-title">
				退还内容：
			</view>
			<view class="ap-cont">
				<view class="fui-tuihuan">
					<text class="fui-text">现金：</text>
					<text class="fui-text1">78元（以实际退款金额为标准）</text>
				</view>
			</view>
		</view>
		<!-- 退还方式 -->
		<view class="apply-password marin25">
			<view class="ap-title">
				现金退还方式：
			</view>
			<view class="ap-cont">
				<fui-checkbox-group name="checkbox" v-model="psWords" @change="passwordChange">
					<view class="fui-list__item">
						<fui-label>
							<view class="fui-align__center">
								<view class="fui-left">
									<text class="fui-text">原路退回</text>
									<text class="fui-text1">（1～3个工作日内退还到原支付方）</text>
								</view>
								<fui-checkbox class="fui-right" color='#35743D' value="2" checked borderRadius='20%'></fui-checkbox>
							</view>
						</fui-label>

					</view>
				</fui-checkbox-group>
			</view>

		</view>
		<!-- 退款原因 -->
		<view class="ap-title1 marin25">
			退款原因（至少选1项）
		</view>
		<view class="apply-password1 marin25">

			<view class="ap-cont">
				<fui-checkbox-group name="checkbox" v-model="psWords" @change="passwordChange">
					<view class="fui-list__item" v-for="(item,index) in reasonList" :key='index'>
						<fui-label :margin="['0','0','40rpx','0']">
							<view class="fui-align__center">
								<view class="fui-left">
									<text class="fui-text">{{item.name}}</text>

								</view>
								<fui-checkbox class="fui-right" color='#35743D' :value="item.id" borderRadius='20%'></fui-checkbox>
							</view>
						</fui-label>

					</view>
				</fui-checkbox-group>
			</view>
			<!-- 更多不爽？必须吐槽！ -->

			<view class="tuA">
				<view class="tu-cao">
					更多不爽？必须吐槽！
				</view>
				<view class="tu-title">
					小湖将用心倾听您的任何不满，欢迎吐槽～
				</view>
			</view>
		</view>

<fui-button text="申请退款" background="#35743D" width='96%' height="72rpx" size="28" :margin="['120rpx', '17rpx']" radius='50rpx' @click="closePopup"></fui-button>
	</view>
</template>

<script>
	import {
		baseOssUrl
	} from '@/common/settings';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				baseOssUrl: baseOssUrl,
				psWords: [],
				reasonList: [{
					name: '原路退回计划有变，没时间消费',
					id: 11
				}, {
					name: '原路退回计划有变，没时间消费',
					id: 12
				}, {
					name: '原路退回计划有变，没时间消费',
					id: 13
				}]
			}
		},
		methods: {
			passwordChange() {}
		}
	}
</script>

<style lang="scss" scoped>
	.applyRefund {
		height: 100%;


		.ap-title1 {
			margin: 60rpx 24rpx 16rpx;
			font-size: 26rpx;
		}

		.apply-password1 {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 24rpx;
			font-size: 28rpx;

			.ap-cont {

				// 退还
				.fui-tuihuan {
					.fui-text1 {
						color: #35743D;
					}
				}
				.fui-list__item{
					border-bottom: 1px solid #D0D0D0;
					margin-bottom: 20rpx;
					
				}
				.fui-align__center {
					display: flex;
					justify-content: space-between;

					.fui-left {
						.fui-text1 {
							color: #35743D;
						}
					}
				}
			}

			.tuA {
				margin-top: 50rpx;

				.tu-cao {
					font-size: 28rpx;
				}

				.tu-title {
					font-size: 26rpx;
					color: #989898;
				}
			}
		}

		.apply-password {
			font-size: 28rpx;

			.ap-title {
				margin: 60rpx 0 16rpx;
				font-size: 26rpx;
			}

			.ap-cont {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx;

				// 退还
				.fui-tuihuan {
					.fui-text1 {
						color: #35743D;
					}
				}

				.fui-align__center {
					display: flex;
					justify-content: space-between;

					.fui-left {
						.fui-text1 {
							color: #35743D;
						}
					}
				}
			}


		}


	}
</style>
